<template>
     <div class="largeScreenContainer">
          <div class="left_box">
               <leftBox @getChartClickData="getChartClickData"></leftBox>
          </div>
          <div class="right_box">
               <rightBox :chartData="chartData"></rightBox>
          </div>
     </div>
</template>

<script setup lang="ts">
import leftBox from './components/leftBox/index.vue'
import rightBox from './components/rightBox/index.vue'
import { ref } from 'vue'
const chartData = ref<any>(null)
const getChartClickData = (data: any) => {
     chartData.value = data
}
</script>

<style scoped lang="scss">
.largeScreenContainer {
     height: 100%;
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
     position: relative;

     .left_box {
          border-radius: 5px;
          width: 40%;
          height: 100%;
          overflow: auto;
          margin: 0 10px 0 0;
          padding: 10px;
          flex-shrink: 0;
          box-shadow:
               1px 1px 3px rgba(255, 255, 255, 0.3),
               -1px -1px 3px rgba(255, 255, 255, 0.2);
          // background-color: #1c3458;
          box-sizing: border-box;
     }

     .right_box {
          width: calc(100% - 40% - 10px);
          border-radius: 5px;
          height: 100%;
          padding: 10px;
          box-shadow:
               1px 1px 3px rgba(255, 255, 255, 0.3),
               -1px -1px 3px rgba(255, 255, 255, 0.2);
          // background-color: #1c3458;
     }
}
</style>
